<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 相册</title>
    <style>
        @charset "utf-8";
        *{
            margin:0;
            padding:0;
        }
        body{
            max-width: 100%;
            min-width: 100%;
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size:100% 100%;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
        }
        li{
            list-style: none;
        }
        .box{
            width:200px;
            height:200px;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size:100% 100%;
            position: absolute;
            margin-left: 42%;
            margin-top: 22%;
            -webkit-transform-style:preserve-3d;
            -webkit-transform:rotateX(13deg);
            -webkit-animation:move 5s linear infinite;
        }
        .minbox{
            width:100px;
            height:100px;
            position: absolute;
            left:50px;
            top:30px;
            -webkit-transform-style:preserve-3d;
        }
        .minbox li{
            width:100px;
            height:100px;
            position: absolute;
            left:0;
            top:0;
        }
        .minbox li:nth-child(1){
            background: url(./01.jpg) no-repeat 0 0;
            -webkit-transform:translateZ(50px);
        }
        .minbox li:nth-child(2){
            background: url(./02.jpg) no-repeat 0 0;
            -webkit-transform:rotateX(180deg) translateZ(50px);
        }
        .minbox li:nth-child(3){
            background: url(./03.jpg) no-repeat 0 0;
            -webkit-transform:rotateX(-90deg) translateZ(50px);
        }
        .minbox li:nth-child(4){
            background: url(./04.jpg) no-repeat 0 0;
            -webkit-transform:rotateX(90deg) translateZ(50px);
        }
        .minbox li:nth-child(5){
            background: url(./05.jpg) no-repeat 0 0;
            -webkit-transform:rotateY(-90deg) translateZ(50px);
        }
        .minbox li:nth-child(6){
            background: url(./06.jpg) no-repeat 0 0;
            -webkit-transform:rotateY(90deg) translateZ(50px);
        }
        .maxbox li:nth-child(1){
            background: url(./1.jpg) no-repeat 0 0;
            -webkit-transform:translateZ(50px);
        }
        .maxbox li:nth-child(2){
            background: url(./2.jpg) no-repeat 0 0;
            -webkit-transform:translateZ(50px);
        }
        .maxbox li:nth-child(3){
            background: url(./3.jpg) no-repeat 0 0;
            -webkit-transform:rotateX(-90deg) translateZ(50px);
        }
        .maxbox li:nth-child(4){
            background: url(./4.jpg) no-repeat 0 0;
            -webkit-transform:rotateX(90deg) translateZ(50px);
        }
        .maxbox li:nth-child(5){
            background: url(./5.jpg) no-repeat 0 0;
            -webkit-transform:rotateY(-90deg) translateZ(50px);
        }
        .maxbox li:nth-child(6){
            background: url(./6.jpg) no-repeat 0 0;
            -webkit-transform:rotateY(90deg) translateZ(50px);
        }
        .maxbox{
            width: 800px;
            height: 400px;
            position: absolute;
            left: 0;
            top: -20px;
            -webkit-transform-style: preserve-3d;

        }
        .maxbox li{
            width: 200px;
            height: 200px;
            background: #fff;
            border:1px solid #ccc;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.2;
            -webkit-transition:all 1s ease;
        }
        .maxbox li:nth-child(1){
            -webkit-transform:translateZ(100px);
        }
        .maxbox li:nth-child(2){
            -webkit-transform:rotateX(180deg) translateZ(100px);
        }
        .maxbox li:nth-child(3){
            -webkit-transform:rotateX(-90deg) translateZ(100px);
        }
        .maxbox li:nth-child(4){
            -webkit-transform:rotateX(90deg) translateZ(100px);
        }
        .maxbox li:nth-child(5){
            -webkit-transform:rotateY(-90deg) translateZ(100px);
        }
        .maxbox li:nth-child(6){
            -webkit-transform:rotateY(90deg) translateZ(100px);
        }
        .box:hover ol li:nth-child(1){
            -webkit-transform:translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
        .box:hover ol li:nth-child(2){
            -webkit-transform:rotateX(180deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
        .box:hover ol li:nth-child(3){
            -webkit-transform:rotateX(-90deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
        .box:hover ol li:nth-child(4){
            -webkit-transform:rotateX(90deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
        .box:hover ol li:nth-child(5){
            -webkit-transform:rotateY(-90deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
        .box:hover ol li:nth-child(6){
            -webkit-transform:rotateY(90deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
        @keyframes move{
            0%{
                -webkit-transform: rotateX(13deg) rotateY(0deg);
            }
            100%{
                -webkit-transform:rotateX(13deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body> 
    <div class="box">
        <ul class="minbox">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ol class="maxbox">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>
</html>